<template>
  <div>
    <div v-for="val in data" :key="val.id">
      <ListCell
        :data="val"
        :config="config"
        is-link
        @myclick="
          res => {
            onClickO2m(val, config)
          }
        "
      />
    </div>

    <ViewPopup
      :show.sync="o2mPopupShow"
      :config="config"
      :data="o2mData"
      @showclose="
        () => {
          o2mPopupShow = false
        }
      "
    />
  </div>
</template>

<script>
import ListCell from '@/components/ListPage/ListCell'
import ViewPopup from './ViewPopup'

export default {
  name: 'ViewO2m',
  components: { ListCell, ViewPopup },

  props: {
    //
    data: { type: Array, default: () => [] },
    config: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data() {
    return {
      //
      o2mPopupShow: false,
      // o2mConfig: {},
      o2mData: {}
    }
  },
  computed: {
    //
  },
  async created() {
    //
    // console.log('ViewO2m, config,', this.config.name, this.config)
  },

  mounted() {
    // console.log('ViewO2m, config,', this.config.name, this.config)
    // console.log('ViewO2m, data,', this.data)
  },
  methods: {
    //
    onClickO2m(o2m, config) {
      //
      // console.log('onClickO2m,', o2m, config)
      // this.$emit('myclick', o2m, config)

      if (config.propForView) {
        // console.log(' Popup', config, config.propForView)
        // this.o2mConfig = config
        this.o2mData = o2m
        this.o2mPopupShow = true
      } else {
        const ref_model = config.relation
        const ref_id = o2m.id

        const path = '/object/view'
        const query = { model: ref_model, id: ref_id }
        const o2mPath = { path, query }
        // console.log('onClickO2m, 2， ', o2mPath)
        this.$router.push(o2mPath)
      }
    }
  }
}
</script>

<style type="text/css"></style>
